<template>
    <div>

        <div class="con" v-if="ifShow">
            <!-- 搜索框 -->
            <van-search v-model="value" placeholder="请输入搜索关键词" input-align="center" shape="round" @click='searchFn' />
            <!-- 使用轮播图组件 -->
            <MyswiperVue :bannerArr="bannerArr"></MyswiperVue>
            <!-- 使用grid频道宫格组件 -->
            <channelComVue :channelArr="channelArr"></channelComVue>
            <!-- 品牌制造商推荐 -->
            <h3>品牌制造商直供</h3>
            <ul class="brand">
                <li v-for="item in brandListArr" :key="item.id" :id="item.id">
                    <img :src="item.pic_url" alt="">
                    <h5>{{ item.name }}</h5>
                    <p>￥{{ item.floor_price }}元</p>
                </li>
            </ul>

            <!-- 周一周四·新品首发 -->
            <h3>周一周四·新品首发</h3>
            <ul class="newGood">
                <li v-for="item in newGoodsListArr" :key="item.id">
                    <img :src="item.list_pic_url" alt="">
                    <h5>{{ item.name }}</h5>
                    <p>￥{{ item.retail_price }}元</p>
                </li>
            </ul>

            <!-- 人气推荐 -->
            <h3>人气推荐</h3>
            <ul class="hotGoods">
                <li v-for="item in hotGoodsListArr" :key="item.id" :id="item.id">
                    <div class="left">
                        <img :src="item.list_pic_url" alt="">
                    </div>
                    <div class="right">
                        <h2>{{ item.name }}</h2>
                        <h4>{{ item.goods_brief }}</h4>
                        <p>{{ item.retail_price }}</p>
                    </div>
                </li>
            </ul>
            <!-- 使用专题精选组件 -->
            <TopicSwiperCom :topicListArr="topicListArr"></TopicSwiperCom>
            <!-- 分类 -->
            <div class="category">
                <div v-for="item in categoryListArr" :key="item.id" :id="item.id">
                    <h3>{{ item.name }}</h3>
                    <ul>
                        <li v-for="item2 in item.goodsList " :key="item2.id" :id="item2.id">
                            <img alt="" v-lazy="item2.list_pic_url">
                            <p>{{ item2.name }}</p>
                            <span>{{ item2.retail_price }}</span>
                        </li>
                    </ul>
                </div>
            </div>
        
        </div>
        <!-- 搜索页面二级路由的坑 -->
        <div v-else>
            <router-view></router-view>
        </div>
    </div>

</template>

<script>
// 导入轮播图组件
import MyswiperVue from '@/components/homeCom/Myswiper.vue';
// 导入频道宫格组件
import channelComVue from '@/components/homeCom/channelCom.vue';
// 专题精选组件 
import TopicSwiperCom from '@/components/homeCom/TopicSwiperCom.vue'
import { homeListApi } from '@/api/homeApi.js'
export default {
    name: '',
    data() {
        return {
            value: '',
            // 定义一个轮播图数据数组
            bannerArr: [],
            // 定义一个频道数组
            channelArr: [],
            // 定义一个品牌制造商数组
            brandListArr: [],
            // 定义一个分类数组
            categoryListArr: [],
            // 人气推荐
            hotGoodsListArr: [],
            // 新品首发
            newGoodsListArr: [],
            // 专题精选
            topicListArr: [],
            // ifShow: true,
            // 定义一个当前路由信息
            currentRouter: '',
            // 控制当前页面是否显示
            ifShow:''


        };
    },
    components: {
        MyswiperVue,
        channelComVue,
        TopicSwiperCom
    },
    mounted() {
        this.getbannerList()
        // console.log('当前路对象路径',this.$route.path);
    },
    methods: {
        async getbannerList() {
            let res = await homeListApi()
            // console.log(res);
            this.bannerArr = res.data.data.banner
            this.channelArr = res.data.data.channel
            this.brandListArr = res.data.data.brandList
            this.categoryListArr = res.data.data.categoryList
            this.hotGoodsListArr = res.data.data.hotGoodsList
            this.newGoodsListArr = res.data.data.newGoodsList
            this.topicListArr = res.data.data.topicList

            // console.log('轮播图数据',this.bannerArr);
            // console.log('分类数据', this.categoryListArr);
        },
        searchFn() {
            this.$router.push({ name: 'search' })
        }
    },
    
    // // 通过watch监听当前路由信息：来控制是一级路由（首页内容）还是二级路由显示（搜索页内容）
    watch:{
        $route:{
            handler(val){
                this.currentRouter =val.path
                if(this.currentRouter=='/home'){
                    this.ifShow=true
                }else{
                    this.ifShow=false
                }
            },
            deep:true,
            immediate:true
        }
    }



}

</script>
<style scoped lang="less">
/* 品牌制造商直供 */
h3 {
    width: 100%;
    font-weight: normal;
    text-align: center;
    margin: 40px auto 40px;
    font-size: 20px;
}

.brand {
    width: 100%;
    height: 245px;
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
    position: relative;

    li {
        width: 49%;
        height: 49%;
        margin: 0 0 0.03rem 0;

        img {
            position: absolute;
            z-index: 1;
            height: 117px;
            width: 183px;
        }

        h5 {
            font-size: 16px;
            font-weight: normal;
            padding: 16px;
            position: absolute;
            z-index: 5;
        }

        p {
            padding: 50px 0 0 15px;
            color: #8B0000;
            position: absolute;
            z-index: 5;
            font-size: 16px;

        }
    }
}

/* 新品首发 */
.newGood {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    li {
        width: 49%;
        height: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        img {
            width: 174px;
            height: 174px;
        }

        h5 {
            font-size: 16px;
            margin-bottom: 5px;
            font-weight: normal;
        }

        p {
            color: #8B0000;
            font-size: 16px;
        }

    }
}

/* 人气推荐 */
.hotGoods {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    li {
        width: 100%;
        height: 104px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;

        .left {
            width: 88px;
            height: 88px;
            margin-left: 30px;

            img {
                width: 88px;
                height: 88px;
            }
        }

        .right {
            height: 88px;
            /* flex: 1; */
            width: 287px;

            h2 {
                font-size: 18px;
                font-weight: normal;
                margin: 8px auto 8px;
                text-indent: 30px;
            }

            h4 {
                font-size: 16px;
                font-weight: normal;
                margin: 3px auto 3px;
                text-indent: 30px;
            }

            p {
                font-size: 8px;
                color: #8B0000;
                text-indent: 30px;
                margin: 8px auto 8px;
                /* padding: 0.3rem; */
            }
        }
    }

}


/* 分类 */
.category {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;

    ul {
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 50px;

        li {
            width: 50%;
            height: 237px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            img {
                width: 174px;
                height: 174px;
            }

            p {
                font-size: 16px;
                margin: 10px auto 15px;
                width: 174px;
                text-align: center;

            }

            span {
                color: #8B0000;
                text-align: center;
                font-size: 16px;

            }
        }
    }
}
</style>